import * as echarts from 'echarts';

// 感觉非常吸引人和酷炫     比粮酷炫牛逼多了
// 没有折线图好，好像过于耀眼了   能不能微弱一点
// 参考了例子
// https://www.makeapie.com/editor.html?c=xphzXhpvlq
// https://www.makeapie.com/editor.html?c=xOAR9tpAaB
export default  function (id) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById(id), 'dark');

var img = '';
var trafficWay = [{
    name: '海淀区',
    value: 30
}, {
    name: '东城区',
    value: 25
}, {
    name: '西城区',
    value: 30
}, {
    name: '朝阳区',
    value: 40
}, {
    name: '丰台区',
    value: 30
}];

var data = [];
// 
var color = ['#00ff99', '#23b974', '#006ced', '#ffe004', '#fc4212']
for (var i = 0; i < trafficWay.length; i++) {
    data.push({
        value: trafficWay[i].value,
        name: trafficWay[i].name,
        itemStyle: {
            normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i]
            }
        }
    }, {
        value: 2,
        name: '',
        itemStyle: {
            normal: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
            }
        }
    });
}
var seriesOption = [{
    name: '',
    type: 'pie',
    clockWise: false,
    radius: [90, 93],//环形粗细  内外径  调整细一点  不至于过于影响整体效果   过于耀眼
    hoverAnimation: false,
    itemStyle: {
        normal: {
            label: {
                show: true,
                position: 'outside',
                color: '#ddd',
                formatter: function(params) {
                    var percent = 0;
                    var total = 0;
                    for (var i = 0; i < trafficWay.length; i++) {
                        total += trafficWay[i].value;
                    }
                    percent = ((params.value / total) * 100).toFixed(0);
                    if (params.name !== '') {
                        return  params.name + '\n' + '\n'  + percent;
                    } else {
                        return '';
                    }
                },
            },
            labelLine: {
                length: 30,
                length2: 100-80,//控制文字标注半径
                show: true,
                color: '#00ffff'
            }
        }
    },
    data: data
}];
var option = {
    backgroundColor: 'rgba(255,255,255,0.0)',
    color: color,
    title: {
        text: '各区交通事故',
        subtext: '366',
        x: 'center',
        y: 'center',
        textStyle: {
            fontWeight: 'normal',
            fontSize: 18,
            color: '#00ff66'
        }, // 标题
        subtextStyle: {
            fontWeight: 'normal',
            fontSize: 17,
            color: '#00ff66'
        }, // 副标题
    },
    graphic: {
        elements: [{
            type: "image",
            z: 3,
            style: {
                image: img,
                width: 178,
                height: 178
            },
            left: 'center',
            top: 'center',
            position: [100, 100]
        }]
    },
    tooltip: {
        show: false
    },
    // legend: {
    //     icon: "circle",
    //     orient: 'horizontal',
    //     // x: 'left',
    //     data: ['正高级教师', '高级教师', '一级教师', '二级教师', '三级教师'],
    //     right: 340,
    //     bottom: 150,
    //     align: 'right',
    //     textStyle: {
    //         color: "#fff"
    //     },
    //     itemGap: 20
    // },
    toolbox: {
        show: false
    },
    series: seriesOption
}

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}